<template>
	<div class="main" v-loading="loading">
		<div class="content">
			<div class="title">产品名称</div>
			<el-tree style="width: 600px" node-key="id" ref="treeRef" :default-checked-keys="checkedKeys" :props="props" :load="loadNode" lazy show-checkbox @check-change="handleProductCheckChange">
				<template #default="scope">
					<el-icon style="margin-right: 6px; color: #ffd659; font-size: 16px">
						<svg v-if="!scope.data?.leaf" data-v-730513b0="" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round" style="fill: currentcolor"><path d="M3 6H16L25 14H45V42H3Z"></path></svg>
						<svg v-else data-v-730513b0="" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linejoin="round" style="transform: scale(0.9) translateY(1px); color: #faad14">
							<path d="M28 2V16H41M28 2H7V45H41V16Z"></path>
							<path d="M15 14H22"></path>
							<path d="M15 25H33"></path>
							<path d="M15 35H33"></path>
						</svg>
					</el-icon>
					<span class="el-tree-node__label" style="margin-top: 2px">
						{{ scope.data.title }}
					</span>
				</template>
			</el-tree>
		</div>
		<div class="footer">
			<el-button class="btn" type="" @click="router.go(-1)">取消</el-button>
			<el-button class="btn" type="primary" @click="save">保存</el-button>
		</div>
	</div>
</template>
<script setup>
	import { ref, onMounted, nextTick } from 'vue';
	import { getProductList, getProductType, add_product_process_rela, get_product_process_rela } from '@/api/ProductBandProductProcess/index';
	import { useRoute, useRouter } from 'vue-router';
	import { ElMessage } from 'element-plus';
	const route = useRoute();
	const router = useRouter();

	//树的实例
	const treeRef = ref(null);

	//loading 加载
	const loading = ref(false);

	//已选的节点
	const checkedKeys = ref([]);

	////匹配节点是否在已选节点中
	const handleProductCheckChange = (data, checked, indeterminate) => {
		nextTick(() => {
			if (checkedKeys.value.includes(data.id)) {
				//如果已选节点中存在该节点，则删除该节点
				checkedKeys.value = checkedKeys.value.filter((item) => item !== data.id);
			}
		});
	};

	//获取已关联的节点 回显
	const getHabitProductList = async () => {
		let res = await get_product_process_rela({ product_process_id: route.query.process_id });
		checkedKeys.value = res.data;
	};

	//保存
	const save = async () => {
		//获取选中的节点
		let checkedNodes = treeRef.value.getCheckedKeys(true);

		//拼接
		checkedNodes = [...checkedKeys.value, ...checkedNodes];

		//去重
		checkedNodes = [...new Set(checkedNodes)];

		if (!checkedNodes.length) {
			ElMessage.error('请选择产品');
			return;
		}

		loading.value = true;

		let res = await add_product_process_rela({
			product_process_id: route.query.process_id,
			product_id: checkedNodes.join(',')
		});
		console.log(res);
		ElMessage.success(res.msg);
		loading.value = false;
	};

	//配置项
	const props = {
		label: 'title',
		children: 'children',
		isLeaf: 'leaf'
	};

	//懒加载
	const loadNode = async (node, resolve) => {
		if (node.level === 0) {
			let res = await getProductType({ pid: 0 });
			console.log(res);
			if (res.data.length) {
				return resolve(res.data);
			} else {
				return resolve([]);
			}
		}
		if (node.level === 1) {
			let res = await getProductType({ pid: node.data.id });
			console.log(res);
			if (res.data.length) {
				return resolve(res.data);
			} else {
				return resolve([]);
			}
		}
		if (node.level > 1) {
			let res = await getProductList({ product_type_id: node.data.id });
			console.log(res);
			if (res.data.data.length) {
				return resolve(
					res.data.data.map((item) => {
						return {
							...item,
							leaf: true
						};
					})
				);
			} else {
				return resolve([]);
			}
		}
	};

	onMounted(() => {
		if (route.query.process_id) {
			//获取回显
			getHabitProductList();
		}
	});
</script>
<style lang="scss" scoped>
	.main {
		box-sizing: border-box;
		width: 100%;
		height: 100vh;
		background-color: #fff;

		.content {
			box-sizing: border-box;
			height: calc(100vh - 70px);
			overflow: auto;
			width: 100%;
			padding: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			.title {
				font-size: 18px;
				font-weight: 700;
			}
		}

		.footer {
			box-sizing: border-box;
			width: 100%;
			height: 40px;
			margin-bottom: 30px;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				width: 150px;
				height: 40px;
			}
		}
	}
</style>
